<template>
  <!--fllow列表-->
  <div class="app-container">
    <div @click="toSelAdd">
      <span>所在地区</span><span style="background: red">{{city}}</span>
    </div>
    <v-distpicker type="mobile" @selected='selected' v-if="showAdd"></v-distpicker>
    <div class="time-mask" v-if="showAdd" @click="hideData"></div>
    <div :class="{'box':true,'active':!showAdd}" ></div>
    <div class="navtab">
      <router-link to="/follow/test" active-class="active">新品课程</router-link>
      <router-link :to="{path:'/follow/test2',query:{id:10}} " active-class="active">课程详情</router-link>
      <!--<router-link>课程推荐</router-link>-->
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  import VDistpicker from 'v-distpicker';
  export default {
    data() {
      return {
        list: [],
        showAdd:false,
        city:''
      }
    },

    components:{
      VDistpicker
    },
    methods:{
      selected(data){
        this.showAdd=false;
        this.city=data.province.value+data.city.value+data.area.value;
      },
      toSelAdd(){
        this.showAdd=true;
      },
      hideData(){
        this.showAdd=false;
      }
    },

  }
</script>
<style scoped>
  .active{
    color: red;
  }
  .box{
    width: 100%;
    height: 2rem;
    background: red;
  }
  .app-container{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 50px;
  }
  .distpicker-address-wrapper{
    width: 100%;
    position: fixed;
    top: 200px;
    overflow: scroll;
    height: 100%;
    z-index: 2;
  }
  .time-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 1;
  }
  .distpicker-address-wrapper ul{
    text-align: center;
  }

  .active{
    background: green;
  }

</style>

